<template>
	<view class='more'>
		<view class='menuTab'>
			<u-tabs :list="menu" :activeStyle='{ "color":"#9102A2", }' lineColor='#9102A2' :current='currentMenu'></u-tabs>
		</view>
		<view class='content' :style='{
			"height":contentHeight+"px",
		}'>
			<swiper class='content_value' :circular='true' :indicator-dots="false" :autoplay="false" :interval="4000" :duration="300">
				<swiper-item class='dFlex jBetween_aStart'>
					<view class='value_item one'>
						<view class='value_item_info'>
							<view class='info_name'>项目名称</view>
							<view class='info_logo imgPublic dFlex jCenter_aCenter'>
								<image src="/static/logo.png" mode="widthFix"></image>
							</view>
							<view class='info_date dFlex jCenter_aCenter'>
								<u-icon size='18px' name="calendar" color='#ffffff'></u-icon>
								<text>16/03/2025</text>
							</view>
							<view class='dFlex jCenter_aCenter fresh'>
								<u-icon size='18px' name="reload" color='#ffffff'></u-icon>
							</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>1ST</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>2ND</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>3RD</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>SPECIAL</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
						</view>
					</view>
					<view class='value_item two'>
						<view class='value_item_info'>
							<view class='info_name'>项目名称</view>
							<view class='info_logo imgPublic dFlex jCenter_aCenter'>
								<image src="/static/logo.png" mode="widthFix"></image>
							</view>
							<view class='info_date dFlex jCenter_aCenter'>
								<u-icon size='18px' name="calendar" color='#ffffff'></u-icon>
								<text>16/03/2025</text>
							</view>
							<view class='dFlex jCenter_aCenter fresh'>
								<u-icon size='18px' name="reload" color='#ffffff'></u-icon>
							</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>1ST</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>2ND</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>3RD</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>SPECIAL</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
						</view>
					</view>
					<view class='value_item two'>
						<view class='value_item_info'>
							<view class='info_name'>项目名称</view>
							<view class='info_logo imgPublic dFlex jCenter_aCenter'>
								<image src="/static/logo.png" mode="widthFix"></image>
							</view>
							<view class='info_date dFlex jCenter_aCenter'>
								<u-icon size='18px' name="calendar" color='#ffffff'></u-icon>
								<text>16/03/2025</text>
							</view>
							<view class='dFlex jCenter_aCenter fresh'>
								<u-icon size='18px' name="reload" color='#ffffff'></u-icon>
							</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>1ST</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>2ND</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>3RD</view>
							<view class='score_value'>1946</view>
						</view>
						<view class='value_item_score'>
							<view class='score_title'>SPECIAL</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
							<view class='score_value'>1946</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					
				</swiper-item>
				<swiper-item>
					
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentMenu:0,
				menu:[
					{name:'菜单1'},
					{name:'菜单2'},
					{name:'菜单3'},
					{name:'菜单4'},
					{name:'菜单5'},
				],
				contentHeight:'',
			};
		},
		onLoad() {
			
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.$t('more.title'),
			})
			this.contentHeight = uni.getSystemInfoSync().windowHeight - 44;
		},
	}
</script>

<style lang="scss">
	.content{
		.content_value{
			.one{
				.value_item_score{
					.score_value{
						background:white;
						color:#333333;
					}
					.score_title{
						background: #000000;
					}
				}
				.value_item_info{
					background: #000000;
					overflow: hidden;
				}
			}
			.two{
				.value_item_score{
					.score_value{
						background:white;
						color:#333333;
					}
					.score_title{
						background: #fc5954;
					}
				}
				.value_item_info{
					background: #fc5954;
					overflow: hidden;
				}
			}
			.value_item{
				.value_item_score{
					width:100%;
					.score_value{
						padding:8px 0;
					}
					.score_title{
						padding:8px 0;
					}
				}
				.value_item_info{
					.fresh{
						margin:10px auto 12px;
					}
					.info_logo{
						width:60px;
						height:60px;
						margin:12px auto;
						image{
							width:40px;
						}
					}
					.info_name{
						font-size:16px;
						max-height:70px;
						overflow: hidden;
					}
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
					padding:12px 5px 0;
					box-sizing: border-box;
				}
				width:calc((100% - 10px) / 2);
				height:100%;
				overflow: auto;
				text-align: center;
				border-radius: 4px;
				color:white;
			}
			.value_item:nth-child(2n + 2){
				margin:0 5px;
			}
			swiper-item{
				width:100%;
				height:100%;
			}
			width:100%;
			height:100%;
		}
		width:100%;
		padding:12px 10px;
		box-sizing: border-box;
	}
	.menuTab{
		width:100%;
		background: white;
	}
</style>
